/**
 * 历史报事
 * @author levy
 * @date    2016/1/10
 * @signForription []
 */
import NoRecord from '../components/NoRecord.js';
import DetailInfo from '../components/detail/ImgTextDetail.js';
import Swiper from '../components/Swiper.js';
import LargeImg from '../components/LargeImg';
import PullRefresh from '../components/mui/PullRefresh.js';

(function (lf, r) {
    var ajax = lf.utils.ajax;

    var Report = React.createClass({
        getInitialState: function () {
            return {
                handlingInfo: [
                    ['workTime', '派单时间'],
                    ['workerName', '负责人'],
                    ['workerPhone', '联系电话']
                ],
                handledInfo: [
                    ['overTime', '完成时间'],
                    ['result', '结果描述']
                ],
                largeImg: '',
            }
        },
        clickFn: function () {
            var data = this.props.data;

            lf.bridgeJs.doLocation('report-comment.html?wfOrderId=' + data.wfOrderId
                + '&eventId=' + data.id
                + '&userId=' + data.staffId, '报事评价');
        },
        render: function () {
            var data = this.props.data,
                status = '',
                pics = [],
                handlingClass = '',
                handledClass = '',
                btnClass = '',
                fmt = 'yyyy-MM-dd hh:mm',
                createTime = lf.utils.format(data.reportTime, fmt);


            if (data.status == '0') {
                status = '待处理';
                handlingClass = 'ele-hide';
                handledClass = 'ele-hide';
            }
            else if (data.status == '1') {
                status = '处理中';
                handledClass = 'ele-hide';
            }
            else if (data.status == '2') {
                status = '已处理';
            }
            else {
                status = '已完成';
                btnClass = ' ele-hide'; //隐藏
            }


            if (data.picUrl != null)
                pics = data.picUrl.split(',');
            return (
                <div>
                    <div className="unhandled">
                        <div className="green-bg">
                            <div>
                                <span className="font48 bold">报事时间</span>
                                <span className="font42">{createTime}</span>
                                <span className="big-font status">{status}</span>
                            </div>
                            <div>
                                <p className="font48 bold">事件位置</p>
                                <span className="font42">{data.location}</span>
                            </div>
                            <span className="font48 bold">描述内容</span>
                            <textarea className="green-bg white" readOnly defaultValue={data.content}
                                      rows="4"></textarea>
                        </div>
                        <Swiper imgList={pics} enlargeHandler={this.enlargeHandler}/>
                    </div>
                    <div className={handlingClass}>
                        <div className="horizontal-border"></div>
                        <div className="handling">
                            <DetailInfo data={data} tableTitList={this.state.handlingInfo} imgList="null"/>
                        </div>
                    </div>
                    <div className={handledClass}>
                        <div className="navigator">
                            <div className="horizontal-border"></div>
                        </div>
                        <div className="handled">
                            <DetailInfo data={data} tableTitList={this.state.handledInfo} imgList="null"/>
                            <Swiper imgList={(data.rebackPic && data.rebackPic.split(',') || '')}
                                    enlargeHandler={this.enlargeHandler}/>
                            <div>
                                <a ref="clickNode" onTouchEnd={this.clickFn}
                                   className={btnClass + " mui-btn lf-green-btn comment"}>评价</a>
                            </div>
                        </div>
                    </div>
                    <LargeImg src={this.state.largeImg}/>
                </div>
            );
        },
        enlargeHandler: function (src) {
            this.setState({largeImg: src});
        }
    });

    var Body = React.createClass({
        getInitialState: function () {
            return {
                reportList: [{initData: ''}],
                imgList: [],
                user: '',
                itemList: []
            }
        },
        loadData: function (page, user) {

            var me = this;
            ajax({
                data: {
                    pageSize: 2,
                    page: page,
                    phone: user.phone
                },
                success: function (data) {
                    if (data.code == '200') {
                        if (!data.dataList.length) {
                            me.setState({
                                total: 0
                            })
                        } else {
                            let itemList = me.state.itemList;
                            let resultList = data.dataList;
                            $.each(resultList, function (i, item) {
                                itemList.push(item);
                            });

                            mui('#pullrefresh')
                            .pullRefresh()
                            .endPullupToRefresh((itemList.length == data.maxCount)); //refresh completed

                            me.setState({
                                itemList: itemList
                            })
                            
                            var reports = itemList.map(function (report) {
                                return <Report data={report}/>
                            });
                            me.setState({
                                reportList: reports
                            });
                        }
                    }
                    else {
                        alert(data.desc);
                    }
                }.bind(me)
            }, lf.api.report.history);
        },
        componentWillMount: function () {
            var me = this;
            lf.bridgeJs.getUser(function (user) {
                me.setState({user: user});
                me.loadData(1, user)
            })
        },
        componentWillReceiveProps: function (nextProps) {
            this.loadData(nextProps.page, this.state.user);
        },

        render: function () {
            if (this.state.reportList.length > 0) {
                return (
                    <div className="report-history">
                        {this.state.reportList}
                    </div>
                );
            }
            else {
                return <NoRecord/>
            }
        }
    });
    const PullRefreshCon = React.createClass({
        getInitialState() {
            return {
                page: 1
            }
        },
        pullupFn: function () {
            let newPage = ++this.state.page;
            this.setState({page: newPage});
        },
        render() {

            return <PullRefresh pullupFn={this.pullupFn} data={<Body page={this.state.page} />}/>;
        }
    });
    r.render(
        <PullRefreshCon />,
        document.getElementById('root'), function () {
            
        }
    )

})(liefeng, React)
